<template>
  <div class="about">
    <h1 class="title">count: {{ store.count }}</h1>
    <h1>doubleCount: {{ store.doubleCount }}</h1>
    <div class="flex-center j-between">
      <el-button @click="store.increment">count ++</el-button>
      <el-icon :size="20">
        <i-ep-edit />
      </el-icon>
      <el-icon color="#f00">
        <i-ep-share />
      </el-icon>
      <i-ep-Delete />
      <el-date-picker v-model="value2" type="monthrange" unlink-panels />
      <el-button type="primary">
        <el-icon style="vertical-align: middle">
          <i-ep-Search />
        </el-icon>
        <span style="vertical-align: middle"> Search </span>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useCounterStore } from "@/stores/modules/counter";

const value2 = ref("");
const store = useCounterStore();
</script>

<style lang="scss" scoped></style>
